// Core variables and mixins
@import "variables";
@import "mixins";
// Core CSS
@import "core";
// @import "normalize";
@import "layout";
// components CSS
@import "listview";
@import "form";
//font css
@import "icon";
@import "animate";

.v-touch {
    height: 100%;
    position: relative;
    /*touch-action: pan-x pan-y !important;*/

    .page {
        height: 100%;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto; // 设定默认滚动容器
        -webkit-overflow-scrolling: touch;
        background: #F2f2f2; // 添加v-transition后，如果page没有底色会透底。。。
    }
}

/**
 * 加下面这两段样式是为了配合v-scroll、v-refresh组件，在被引入的页面进行滚动容器的设定，其他页面还原基本样式。
 * 目的是为了让输入页面input获取焦点时，键盘弹出的状态，使得页面滚动容器的滚动条不冲突。
 * QA在物业通-报修项目中新增报修时发现input获取焦点后上下滚动卡顿，实是滚动容器在输入法键盘弹出后出现了两个滚动条；
 * 另一个目的，如果滚动容器为默认的window的话，input获取焦点后，会把input顶上去，如果使用非window的滚动容器则不行；
 *              -- Author by Dio Zhu. on 2017.8.8
 */
// html {
//     width: 100%;
//     height: 100%;
//     position: relative;
//     overflow-x: hidden;
//     overflow-y: auto;
    
//     &::-webkit-scrollbar {
//         display: none;
//     }

//     body {
//         width: 100%;
//         height: initial;
//         overflow: initial;

//         .app {
//             height: initial;
//             overflow: initial;

//             .page {
//                 height: initial;
//                 overflow: initial;
//             }
//         }
//     }
// }
// html.overflow {
//     body {
//         width: 100%;
//         height: 100%;
//         position: relative;
//         overflow: hidden;

//         .app {
//             height: 100%;
//             position: relative;

//             .page {
//                 height: 100%;
//                 position: relative;
//                 overflow-x: hidden;
//                 overflow-y: auto; // 设定默认滚动容器
//                 -webkit-overflow-scrolling: touch;

//                 .v-scroll-container {
//                     height: 100%;
//                     overflow: auto;
//                 }

//                 .v-refresh__container {
//                     height: 100%;
//                     overflow-x: hidden;
//                     overflow-y: auto; // 设定默认滚动容器
//                     -webkit-overflow-scrolling: touch;

//                     .v-scroll-container { // 如果v-scroll存在于v-refresh中，则使用v-refresh的滚动容器，这里进行重置
//                         height: initial;
//                         overflow: initial;
//                     }
//                 }
//             }
//         }
//     }
// }

//[v-cloak]{
//    //display: none;
//}

/* loading */
.loading-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background:#FFF;
    opacity:0.8;

    &.show {
        display: block;
    }
    &.hide {
        display: none;
    }

    .loading-img {
        position: absolute;
        width: pxTorem(30px);
        height: pxTorem(30px);
        top: 45%;
        left: 50%;
        margin-top: pxTorem(-15px);
        margin-left: pxTorem(-15px);
        text-align: center;
        //background: #fff
    }
}

//// 页面切换效果
//.fade-transition {
//    transition: opacity .3s ease;
//}
//.fade-enter,
//.fade-leave {
//    opacity: 0;
//}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active {
    transition: opacity .3s ease;
}
.fade-enter, .fade-leave-active {
    opacity: 0;
}

/***所有页面共有样式***/
.page-all{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    //touch-action: pan-x pan-y !important;
    touch-action: pan-y;

    h2{
        padding:pxTorem(10px) pxTorem(20px);
    }
}

.no-border {
    border:0 !important;
}

//div[class^=page-] {
.page {
    width: 100%;
    //min-height: 100%;
    //height: 100%;
    //overflow-x: hidden;
    //overflow-y: auto;
    //-webkit-overflow-scrolling: touch;
}
